<script>
import { defineComponent, h, resolveComponent } from "vue";

const layouts = {
  colFormItem(h, element, attrs) {
    let className = this.activeId === element.formId ? "drawing-item active-from-item" : "drawing-item";
    if (this.formConf.unFocusedComponentBorder) className += " unfocus-bordered";
    return h(
      resolveComponent("el-col"),
      {
        span: element.span,
        class: className,
      },
      {
        default: () => [
          h(
            resolveComponent("el-form-item"),
            {
              labelWidth:
                element.tag !== "h1" && element.tag !== "h2"
                  ? element.labelWidth
                    ? `${element.labelWidth}px`
                    : null
                  : element.tag === "h1"
                  ? "1px"
                  : "10px",
              label: (element.tag !== "h1" && element.tag !== "h2" && element.label) || "",
              required: element.required,
              prop: element.vModel,
            },
            {
              default: () => [
                h(resolveComponent("auto-form-render"), {
                  key: element.renderKey,
                  conf: element,
                  formData: this.formData,
                  onClick: (event) => event.stopPropagation(),
                }),
              ],
            }
          ),
        ],
      }
    );
  },
  rowFormItem(h, element, attrs) {
    const className = this.activeId === element.formId ? "drawing-row-item active-from-item" : "drawing-row-item";
    return h(
      resolveComponent("el-col"),
      {
        span: element.span,
      },
      {
        default: () => [
          h(
            resolveComponent("el-row"),
            {
              gutter: element.gutter,
              class: className,
            },
            {
              default: () => [
                h("span", { class: "component-name" }, [element.componentName]),
                h(
                  {
                    list: element.children,
                    animation: 340,
                    group: "componentsGroup",
                    class: "drag-wrapper",
                    itemKey: `${element.renderKey}`,
                    tag: element.type === "flex" ? "el-row" : "span",
                    justify: element.justify,
                    align: element.align,
                  },
                  {
                    item: (itemData) => {
                      const el = itemData.element;
                      const ix = itemData.index;
                      const layout = layouts[el.layout];
                      if (layout) {
                        let child = layout.call(_this, h, el, ix, element.children, attrs);
                        return [child];
                      } else {
                        return null;
                      }
                    },
                  }
                ),
              ],
            }
          ),
        ],
      }
    );
  },
};

function layoutIsNotFound(self) {
  throw new Error(`没有与${self.element.layout}匹配的layout`);
}

export default defineComponent({
  props: {
    element: {
      type: Object,
    },
    index: {
      type: Number,
    },
    activeId: {
      type: Number,
    },
    formConf: {
      type: Object,
    },
    drawingList: {
      type: Array,
    },
    formData: {
      type: Object,
    },
  },
  setup(props, { attrs }) {
    const layout = layouts[props.element.layout];
    if (layout) {
      return () => layout.call(props, h, props.element, props.index, props.drawingList, attrs, props.formData);
    }
    return () => layoutIsNotFound(this);
  },
});

const rowFromItemComponent = defineComponent({
  props: {},
  setup(props) {},
});
</script>
